// 销售单据页面
import React, {Component} from 'react';
import {DeviceEventEmitter, StatusBar, Text, View, TouchableWithoutFeedback, ScrollView, TouchableOpacity, StyleSheet, TextInput, FlatList} from 'react-native';

import CXIcon from '../../../style/icon/CXIcon';
import styles, {mainBackgroundColor, white} from "../../../style/global";
import storeActions from '../../../store/actions/store';
import {bindActionCreators} from 'redux';
import {is, fen_to_yuan} from '../../../utils';
import {Actions} from "react-native-router-flux";
import {connect} from "react-redux";

class balanceOrderPage extends Component {
    constructor(props){
        super(props);
        this.orderBalancePage = 1;
        this.state = {
            isLoadMore:false,
            activeIndex:0,
            searchVal:''
        }
    }
    componentDidMount(){
        let {storeAction} = this.props;
        storeAction.getBalanceOrderList(1,this.props.user_id,this.props.order_no,(res) =>{
            if (res && res.status && res.data && res.data.length){
                if(this.props.order_no){
                    storeAction.getBalanceOrderDetail(this.props.order_no);
                } else {
                    let firstOrderNo = res.data[0].order_no;
                    storeAction.getBalanceOrderDetail(firstOrderNo);
                }
            }
        });
        //监听事件
        this.listener = DeviceEventEmitter.addListener('orderBalanceHasMore',(isLoadMore) => {
            this.setState({
                isLoadMore:isLoadMore
            })
        })

    }
    componentWillUnmount() {
        this.listener.remove();
    }
    //创建空布局
    _createEmptyView(){
        return (
            <View style={{height:'100%', alignItems:'center', justifyContent:'center',paddingVertical: 20}}>
                <Text style={{fontSize:16}}>
                    暂无列表数据!!!
                </Text>
            </View>
        );
    }
    //加载更多
    _onLoadMore(){
        if(this.state.isLoadMore){
            this.orderBalancePage = this.orderBalancePage + 1;
            let {storeAction} = this.props;
            storeAction.getBalanceOrderList(this.orderBalancePage,this.props.user_id,this.state.searchVal);
        }
    }
    //自己渲染订单列表数据
    _renderOrderList(rowDate,index){
        if (!rowDate) {
            return (
                <View>

                </View>
            )
        }
        return(
            <TouchableWithoutFeedback onPress={() => this._clickOrderItem(index,rowDate.order_no)}>
                <View style={[style.orderItem,index == this.state.activeIndex ?  style.orderItemActive : '']}>
                    <View style={style.sItem}>
                        <Text style={[style.mText, index == this.state.activeIndex ? style.orderItemActiveText : '', {flex: 1}]}>订单号：{rowDate.order_no}</Text>
                        <Text style={[style.itemMoney, index == this.state.activeIndex ? style.orderItemActiveText : '']}>￥ {rowDate.pay_amount_yuan}</Text>
                    </View>
                    <View style={style.sItem}>
                        <Text style={[style.mText, index == this.state.activeIndex ? style.orderItemActiveText : '', {flex: 1}]}>会员号： {rowDate.user ? rowDate.user.mobile : ''}</Text>
                        <Text style={[style.mText, index == this.state.activeIndex ? style.orderItemActiveText : '']}>{rowDate.pay_time}</Text>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        )
    }
    //渲染订单详情数据
    _renderOrderDetail(){

        let{storeState} = this.props;
        if(storeState.orderBalanceList.length){
            if (storeState.orderBalanceDetail.order&&storeState.orderBalanceDetail.order.order_no) {
                return(
                    <View style={style.pageRight}>
                        <View style={style.orderNoBox}>
                            <Text style={style.bigText}>
                                订单号：{storeState.orderBalanceDetail.order.order_no}
                            </Text>
                            <Text style={style.bigText}>
                                时间：{storeState.orderBalanceDetail.order.pay_time}
                            </Text>
                        </View>
                        <View style={style.orderInfo}>
                            <ScrollView>
                                <View style={style.userInfo}>
                                    <Text style={{flex: 1}}>

                                        会员：<Text style={{color: '#4B8AF2'}}>{storeState.orderBalanceDetail.order.user ? storeState.orderBalanceDetail.order.user.nick_name : ''} {storeState.orderBalanceDetail.order.user ? storeState.orderBalanceDetail.order.user.mobile : ''}</Text>
                                    </Text>
                                    <Text style={{flex: 1}}>
                                        导购:{storeState.orderBalanceDetail.clerk.name}
                                    </Text>
                                    <TouchableWithoutFeedback>
                                        <View style={style.noteBox}>
                                            <CXIcon name='beizhu' color='#909090' size={20}></CXIcon>
                                            <Text style={{marginLeft: 10}} numberOfLines={1}>备注: {storeState.orderBalanceDetail.order.note || ''}</Text>
                                        </View>
                                    </TouchableWithoutFeedback>
                                </View>
                                <View style={style.orderDetailInfo}>
                                    <View style={[style.detailInfoItem, style.detailInfoItemTitle]}>
                                        <View style={{flex: 3}}>
                                            <Text style={style.mText}>
                                                商品名称
                                            </Text>
                                        </View>
                                        <View style={style.detailCenter}>
                                            <Text style={style.mText}>
                                                数量
                                            </Text>
                                        </View>
                                        <View style={style.detailCenter}>
                                            <Text style={style.mText}>
                                                单价
                                            </Text>
                                        </View>
                                        <View style={style.detailCenter}>
                                            <Text style={style.mText}>
                                                小计
                                            </Text>
                                        </View>
                                        {/* <View style={style.detailCenter}>

                                        </View>*/}
                                    </View>
                                    <View style={[style.detailInfoItem]}>
                                        <View style={{flex: 3}}>
                                            <Text>
                                                {storeState.orderBalanceDetail.order.balance_title}
                                            </Text>
                                        </View>
                                        <View style={style.detailCenter}>
                                            <Text>
                                                1
                                            </Text>
                                        </View>
                                        <View style={style.detailCenter}>
                                            <Text>
                                                {storeState.orderBalanceDetail.order.amount_yuan}
                                            </Text>
                                        </View>
                                        <View style={style.detailCenter}>
                                            <Text>
                                                {storeState.orderBalanceDetail.order.amount_yuan}
                                            </Text>
                                        </View>
                                        {/* <View style={style.detailCenter}>
                    <TouchableWithoutFeedback>
                        <Text style={style.detailBtn}>
                            申请售后
                        </Text>
                    </TouchableWithoutFeedback>
                </View>*/}
                                    </View>
                                </View>
                                <View style={style.orderMoneyInfo}>
                                    <Text style={{flex: 1, fontWeight: 'bold'}}>
                                        共1件
                                    </Text>
                                    <Text style={{fontWeight: 'bold'}}>
                                        商品总额：￥{storeState.orderBalanceDetail.order.amount_yuan}
                                    </Text>
                                    <Text style={{fontWeight: 'bold', width: 200, textAlign: 'right'}}>
                                        实收金额：<Text style={{color: mainBackgroundColor}}>￥{fen_to_yuan(storeState.orderBalanceDetail.actual)}</Text>
                                    </Text>
                                    <Text style={{paddingLeft: 50}}>
                                        找零金额：￥{fen_to_yuan(storeState.orderBalanceDetail.remaining)}
                                    </Text>
                                </View>
                                {/*<View style={style.orderMoneyInfo}>
                                    <Text style={{flex: 1}}>
                                        优惠信息：
                                    </Text>
                                    <Text>
                                        积分：{storeState.orderDetail.order.adjustment_point || 0}
                                    </Text>
                                    <Text style={{width: 200, textAlign: 'right'}}>
                                        优惠券：{storeState.orderDetail.order.adjustments_total_yuan || 0}
                                    </Text>
                                </View>*/}
                                <View style={[style.orderMoneyInfo, {borderBottomWidth: 0}]}>
                                    <Text style={{flex: 1}}>
                                        支付详情：
                                    </Text>
                                    {this._renderPayments(storeState.orderBalanceDetail.payments)}

                                </View>
                            </ScrollView>
                        </View>
                        <View style={style.bottomBox}>
                       {/* <TouchableWithoutFeedback>
                            <Text style={style.btnText}>
                                打印
                            </Text>
                        </TouchableWithoutFeedback>*/}
                    </View>
                    </View>
                )
            }
        } else {
            return(
                <View>

                </View>
            )
        }
    }
    //点击搜索
    _clickSearchOrder(){
        let {storeAction} = this.props;
        storeAction.getBalanceOrderList(1,this.props.user_id,this.state.searchVal,(res) =>{
            if (res && res.status && res.data && res.data.length){
                let firstOrderNo = res.data[0].order_no;
                storeAction.getBalanceOrderDetail(firstOrderNo);
            }
        });

    }
    //点击订单变色
    _clickOrderItem(index,order_no){
        this.setState({
            activeIndex:index
        })
        let {storeAction} = this.props;
        storeAction.getBalanceOrderDetail(order_no);
    }
    //渲染支付方式
    _renderPayments(payments){
        return payments.map((item,index) =>{
            return (
                <Text style={[index == payments.length -1 ? style.paymentsLast : '']} key={index}>
                    {item.channel_text}支付：￥{item.amount_yuan}
                </Text>
            )
        })
    }
    render() {
        let{storeState} = this.props;
        return (
            <View style={style.page}>
                <StatusBar hidden={true} />

                <View style={style.box}>
                    <View style={style.pageLeft}>
                        <View style={style.searchBox}>
                            <TextInput
                                style={style.searchInput}
                                placeholder={"请输入订单号搜索"}
                                onChangeText={(searchVal) =>this.setState({searchVal})}
                            />
                            <Text style={style.searchText} onPress={()=>{this._clickSearchOrder()}}>搜索</Text>
                        </View>
                        <View style={style.orderList}>
                            <View>
                                <FlatList
                                    style={{height: 500}}
                                    keyExtractor={(item, index) => index.toString()}
                                    data={storeState.orderBalanceList}
                                    renderItem={({item,index}) => this._renderOrderList(item,index)}
                                    onEndReached = {()=> this._onLoadMore()}
                                    onEndReachedThreshold={0.1}
                                    extraData={storeState.orderBalanceList}
                                    ListEmptyComponent={this._createEmptyView}
                                >
                                </FlatList>

                            </View>
                        </View>
                    </View>
                    {this._renderOrderDetail()}

                </View>

            </View>
        )
    }
};

const style = StyleSheet.create({
    page: {
        height: '100%',
        backgroundColor: '#fff',
    },
    box: {
        flexDirection: 'row',
        height: '100%',
        // marginTop: 60
    },
    paymentsLast:{
        width: 200,
        textAlign: 'right'
    },
    pageLeft: {
        width: 430
    },
    searchBox: {
        flexDirection: 'row',
        height: 80,
        alignItems: 'center',
        borderBottomWidth: 1,
        borderColor: '#DBDBDB',
        paddingHorizontal: 15
    },
    searchInput: {
        paddingLeft: 20,
        flex: 1,
        height: 50,
        backgroundColor: '#F3F3F3',
    },
    searchText: {
        width: 80,
        backgroundColor: mainBackgroundColor,
        textAlign: 'center',
        lineHeight: 50,
        color: white,
    },
    orderList: {
        flex: 1
        // height: '100%',
    },
    orderItem: {
        padding: 15,
        borderBottomWidth: 1,
        borderColor: '#DBDBDB'
    },
    orderItemActive: {
        backgroundColor: '#4B8AF2'
    },
    orderItemActiveText: {
        color: white
    },
    sItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginVertical: 2
    },
    itemMoney: {
        color: '#4B8AF2',
        fontSize: 20
    },
    mText: {
        color: '#909090',
        fontSize: 12
    },
    pageRight: {
        height: '100%',
        flex: 1,
        backgroundColor: '#F3F3F3',
        borderLeftWidth: 1,
        borderColor: '#DBDBDB'
    },
    orderNoBox: {
        flexDirection: 'row',
        height: 80,
        alignItems: 'center',
        justifyContent: 'space-between',
        borderBottomWidth: 1,
        borderColor: '#DBDBDB',
        paddingHorizontal: 30
    },
    bigText: {
        fontSize: 18,
        color: '#4A4A4A'
    },
    orderInfo: {
        padding: 30,
        paddingBottom: 80,
        flex: 1
    },
    userInfo: {
        flexDirection: 'row'
    },
    noteBox: {
        width: 220,
        flexDirection: 'row'
    },
    orderDetailInfo: {
        marginTop: 30,
        backgroundColor: white,
        borderWidth: 1,
        borderColor: '#D7D7D7',
        borderRadius: 4,
        paddingBottom: 80
    },
    detailInfoItem: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 20,
        borderBottomWidth: 1,
        borderColor: '#D7D7D7',
    },
    detailCenter: {
        flex: 1,
        alignItems: 'center'
    },
    detailInfoItemTitle: {
        paddingVertical: 10
    },
    detailBtn: {
        padding: 15,
        borderWidth: 1,
        borderColor: mainBackgroundColor,
        borderRadius: 4,
        color: mainBackgroundColor
    },
    orderMoneyInfo: {
        paddingVertical: 30,
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderColor: '#D7D7D7',
    },
    bottomBox: {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: white,
        height: 80,
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 30,
        justifyContent: 'flex-end'
    },
    btnText: {
        color: white,
        paddingVertical: 10,
        paddingHorizontal: 40,
        borderRadius: 4,
        backgroundColor: mainBackgroundColor
    }
});

export default connect(state =>({
    storeState: state.store
}),dispatch =>({
    storeAction: bindActionCreators(storeActions,dispatch)
}))(balanceOrderPage);